// import React, { memo } from 'react'
// import styles from './index.module.css'
// import Draggable from 'react-draggable';

// const ElementDraggable = memo(() => {

//   return (
//     <div className={`${styles.container} container`}>
//        <Draggable bounds={".container"}>
//           <div className={styles.items}>
//             <div className={styles.item}>普通的拖拽组件1</div>
//           </div>
//       </Draggable>
//        <Draggable bounds={".container"}>
//           <div className={styles.items}>
//             <div className={styles.item}>普通的拖拽组件2</div>
//           </div>
//       </Draggable>
//        <Draggable bounds={".container"}>
//           <div className={styles.items}>
//             <div className={styles.item}>普通的拖拽组件3</div>
//           </div>
//       </Draggable>
//     </div>
//   )
// })

// export default ElementDraggable



// import React, { memo, useState, useRef } from 'react';
// import styles from './index.module.css';
// import Draggable from 'react-draggable';

// // 元素初始数据（含id、初始位置、尺寸）
// const initialItems = [
//   { id: 1, text: '普通的拖拽组件1', x: 0, y: 0, width: 200, height: 80 },
//   { id: 2, text: '普通的拖拽组件2', x: 220, y: 0, width: 200, height: 80 },
//   { id: 3, text: '普通的拖拽组件3', x: 0, y: 100, width: 200, height: 80 },
// ];

// const ElementDraggable = memo(() => {
//   const [items, setItems] = useState(initialItems);
//   const containerRef = useRef(null); // 容器ref，用于获取边界

//   // 检查两个矩形是否碰撞
//   const isColliding = (rect1, rect2) => {
//     return (
//       rect1.x < rect2.x + rect2.width &&
//       rect1.x + rect1.width > rect2.x &&
//       rect1.y < rect2.y + rect2.height &&
//       rect1.y + rect1.height > rect2.y
//     );
//   };

//   // 处理拖拽事件
//   const handleDrag = (id, e, data) => {
//     // 获取容器边界（限制在容器内移动）
//     const container = containerRef.current;
//     if (!container) return;

//     const containerRect = container.getBoundingClientRect();
//     const containerX = containerRect.left;
//     const containerY = containerRect.top;

//     // 计算当前元素的新位置（相对于容器）
//     const newX = Math.max(0, Math.min(data.x, containerRect.width - items.find(i => i.id === id).width));
//     const newY = Math.max(0, Math.min(data.y, containerRect.height - items.find(i => i.id === id).height));

//     // 构建当前元素的新状态
//     const updatedItem = {
//       ...items.find(i => i.id === id),
//       x: newX,
//       y: newY,
//     };

//     // 检查是否与其他元素碰撞
//     const hasCollision = items.some(item => {
//       if (item.id === id) return false; // 跳过自身
//       return isColliding(updatedItem, item);
//     });

//     // 若无碰撞，更新位置；若有碰撞，不更新（避免重叠）
//     if (!hasCollision) {
//       setItems(items.map(item => (item.id === id ? updatedItem : item)));
//     }
//   };

//   return (
//     <div ref={containerRef} className={`${styles.container} container`}>
//       {items.map((item) => (
//         <Draggable
//           key={item.id}
//           bounds={".container"} // 限制在容器内拖拽
//           position={{ x: item.x, y: item.y }} // 受控位置
//           onDrag={(e, data) => handleDrag(item.id, e, data)} // 拖拽时检测碰撞
//         >
//           <div 
//             className={styles.items}
//             style={{ 
//               width: item.width, 
//               height: item.height,
//               position: 'absolute', // 必须设置绝对定位
//               left: item.x,
//               top: item.y,
//             }}
//           >
//             <div className={styles.item}>{item.text}</div>
//           </div>
//         </Draggable>
//       ))}
//     </div>
//   );
// });

// export default ElementDraggable;


import React, { useState, memo } from 'react';
import Draggable from 'react-draggable';
import styles from './index.module.css';

// 初始列表数据
const initialList = [
  { id: 1, content: '列表项 1', x: 0, y: 0 },
  { id: 2, content: '列表项 2', x: 0, y: 80 },
  { id: 3, content: '列表项 3', x: 0, y: 160 },
  { id: 4, content: '列表项 4', x: 0, y: 240 },
];

const DraggableList = memo(() => {
  const [list, setList] = useState(initialList);

  // 处理拖动位置更新
  const handleDragStop = (id, e, data) => {
    // 更新当前项的位置（data.x 和 data.y 是相对于初始位置的偏移量）
    setList(prevList => 
      prevList.map(item => 
        item.id === id 
          ? { ...item, x: data.x, y: data.y }  // 保存最终偏移量
          : item
      )
    );
  };

  return (
    <div className={styles.parentContainer}>
      <h3>可拖动列表（限制在父容器内）</h3>
      
      {/* 列表项容器：遍历渲染可拖动项 */}
      <div className={styles.listContainer}>
        {list.map(item => (
          <Draggable
            key={item.id}
            // 限制拖动范围为父级（.parentContainer）
            bounds="parent"
            // 初始位置（基于父容器的偏移量）
            defaultPosition={{ x: item.x, y: item.y }}
            // 拖动结束时更新位置（也可在拖动中通过 onDrag 实时更新）
            onStop={(e, data) => handleDragStop(item.id, e, data)}
          >
            {/* 可拖动的列表项 */}
            <div className={styles.draggableItem}>
              {item.content}
            </div>
          </Draggable>
        ))}
      </div>
    </div>
  );
});

export default DraggableList;